<template>
	<view>
		<!-- 头部 -->
		<view class="head">
			<view class="like">
				喜欢
			</view>
			<view class="right">
				<image src="" mode=""></image>
				<image src="" mode=""></image>
			</view>
		</view>
		<!-- 用户动态 -->
		<view class="user" v-for="(item,index) in 3" :key="index">
			<view class="user-in">
			<view class="user-info">
				<view class="left">
					<view class="left-l">
						<image src="../../static/pho0.jpg" mode=""></image>
					</view>
					<view class="left-r">
						<view class="user-name">
							用户名
						</view>
						<view class="user-time">
							2019/12/12 12:59
						</view>
					</view>
				</view>
				<view class="right">
					举报
				</view>
			</view>
			<!-- 用户发布内容 -->
			<view class="user-content">
				<view class="content-text">
					用户动态用户动态用户动态用户动态用户动态用户动态用户动态
				</view>
				<view class="user-photo">
					<image src="../../static/pho1.jpg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 点赞和评论 -->
			<view class="fabulous">
				<view class="left">
					<image src="" mode=""></image>
					<text>99+</text>
				</view>
				<view class="right">
					<image src="" mode=""></image>
					<text>99+</text>
				</view>
			</view>
			<!-- 用户评论 -->
			<view class="comment">
				<view class="top">
					<text>XX用户 ：</text>
					<text>你真好看</text>
				</view>
				<view class="bottom">
					<text>XX用户</text>
					<text>回复</text>
					<text>你也是</text>
				</view>
			</view>
			<view class="all">
				查看全部留言
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	page{
		background: #EAEAEA;
	}
.head{
	padding: 40upx 40upx 20upx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2upx solid #D6D6D6;
	font-size: 30upx;
	.right image{
		width: 40upx;
		height: 40upx;
		background: pink;
	}
}
.user{
	padding: 15upx;
	.user-in{
		padding: 15upx;
		border-bottom: 2upx solid #D6D6D6;
	}
	.user-info{
		// padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.left-l image{
				width: 72upx;
				height: 72upx;
				border-radius: 50%;
			}
			.left-r{
				padding-left: 30upx;
				.user-name{
					font-size: 28upx;
				}
				.user-time{
					font-size: 24upx;
				}
			}
		}
		.right{
			font-size: 28upx;
			display: flex;
			align-items: center;
		}
	}
	.user-content{
		font-size: 28upx;
		padding: 10upx;
		.user-photo{
			padding: 20upx 0;
			height: 600upx;
			overflow: hidden;
			image{
				width: 100%;
			}
		}
	}
	.fabulous{
		display: flex;
		font-size: 26upx;
		padding: 0 20upx;
		.left{
		  display: flex;
		  align-items: center;	
		}
		.right{
			display: flex;
			align-items: center;
		}
		 image{
			width: 48upx;
			height: 48upx;
			background: pink;
		}
	}
	.comment{
		padding: 20upx;
		font-size: 24upx;
		.bottom{
			padding-top: 10upx;
		}
	}
	.all{
		font-size: 28upx;
		padding:0 0  15upx 20upx;
	}
}
</style>
